<script setup lang="ts">
import { ref, computed } from 'vue'
import { NCard, NIcon, NForm, NFormItem, NInput, NButton, NSelect, NDatePicker, NRadioGroup, NRadio, NCheckboxGroup, NCheckbox, NSpace, NSwitch, NTimePicker, NRadioButton } from 'naive-ui'
import type { FormInst } from 'naive-ui'
import { showMsg } from '@/assets/utils/tools'
import baseTable from '@/components/base-table/index.vue'
import baseCard from '@/components/base-card/index.vue'
import { useRouter } from 'vue-router';
import { useMenuRecordStore } from '@/stores/menuRecord'

const router = useRouter()
const menuRecord = useMenuRecordStore()
const formRef = ref<FormInst | null>(null)

const formValue = ref({
    user: {
        name: '',
        age: ''
    },
    phone: '',
    time: '13:30',
    datetimeValue:null,
    check:[],
})

const rules = ref({
    user: {
        name: {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
        },
        age: {
            required: true,
            message: '请输入年龄',
            trigger: ['input', 'blur']
        }
    },
    phone: {
        required: true,
        message: '请输入电话号码',
        trigger: ['input']
    }
})
const generalOptions = ref(['groode', 'veli good', 'emazing', 'lidiculous'].map(
    v => ({
        label: v,
        value: v
    })
))


function handleValidateClick(e: MouseEvent) {
    console.log(e);

    e.preventDefault()
    formRef.value?.validate((errors) => {
        if (!errors) {
            showMsg('success', 'Valid')
        }
        else {
            console.log(errors)
            showMsg('error', 'Invalid')
        }
    })
}
function test() {

}

//119.188.168.216
// import * as Minio from 'minio'


// const minioClient = new Minio.Client({
//   endPoint: '192.168.0.4',
//   port: 9000,
//   useSSL: false,
//   accessKey: 'Wt5SWKR0v0IzjdRkZoQa',
//   secretKey: 'VtS6NYPLC1tKXSHc7BLa8S3TRdTdI5CRDkjuDMcl',
// })

// console.log(new Minio.Client());

//test   fada123456

// import { initMinio, putObject } from 'minio-js'
// function handleFiles(event: any) {
//     var f = event.target.files[0]
//     let reader = new FileReader()
//     reader.readAsArrayBuffer(f)
//     reader.onload = function (e: any) {
//         let res = e.target.result //ArrayBuffer
//         //先初始化
//         initMinio({
//             endPoint: '192.168.2.98',
//             port: 9002,
//             useSSL: false,
//             accessKey: 'admin',
//             secretKey: '12345678',
//         })
//         //再上传
//         putObject('act', res, f.name, function (err, data) {
//             if (err) console.log(err)
//             else {
//                 console.log('上传完成')
//             }
//         })
//     }
// }
// import { Minio } from 'minio-js'
// import { initMinio, putObject } from 'minio-js'

// const minioClient = new Minio.Client({
//     endPoint: '192.168.0.4',
//     port: 9000,
//     useSSL: false,
//     accessKey: 'Wt5SWKR0v0IzjdRkZoQa',
//     secretKey: 'VtS6NYPLC1tKXSHc7BLa8S3TRdTdI5CRDkjuDMcl',
// })
// console.log(minioClient);



function handleFiles(event: any) {

    // var f = event.target.files[0]
    // let reader = new FileReader()
    // reader.readAsArrayBuffer(f)
    // reader.onload = function (e: any) {
    //     let res = e.target.result //ArrayBuffer
    //     //先初始化
    //     initMinio({
    //         endPoint: '192.168.0.4',
    //         port: 9000,
    //         useSSL: false,
    //         accessKey: 'Wt5SWKR0v0IzjdRkZoQa',
    //         secretKey: 'VtS6NYPLC1tKXSHc7BLa8S3TRdTdI5CRDkjuDMcl',
    //     })
    //     //再上传
    //     putObject('my-bucket', res, f.name, function (err, data) {
    //         if (err) console.log(err)
    //         else {
    //             console.log('上传完成')
    //         }
    //     })
    // }

}

</script>
<template>
    <baseCard title="生产数据填报(表单)">
        <div style="width: 50%;margin: 0 auto;">
            <n-form ref="formRef" label-placement="left" :label-width="80" :model="formValue" :rules="rules">
                <n-form-item label="姓名" path="user.name">
                    <n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
                </n-form-item>
                <n-form-item label="年龄" path="user.age">
                    <n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
                </n-form-item>
                <n-form-item label="日期" path="phone">
                    <n-date-picker v-model:value="formValue.datetimeValue" type="datetime" />
                    <!-- <n-input v-model:value="formValue.phone" placeholder="电话号码" /> -->
                </n-form-item>
                <n-form-item label="时间" path="phone">
                    <n-time-picker default-formatted-value="00:12:13" />
                    <!-- <n-input v-model:value="formValue.time" placeholder="电话号码" /> -->
                </n-form-item>
                <n-form-item label="select" path="phone">
                    <n-select v-model:value="formValue.phone" placeholder="Nested Path 2" :options="generalOptions" />
                    <!-- <n-input v-model:value="formValue.phone" placeholder="电话号码" /> -->
                </n-form-item>
                <n-form-item label="rideo" path="phone">
                    <n-radio-group v-model:value="formValue.phone" name="radiogroup1">
                        <n-space>
                            <n-radio value="Radio 1">
                                Radio 1
                            </n-radio>
                            <n-radio value="Radio 2">
                                Radio 2
                            </n-radio>
                            <n-radio value="Radio 3">
                                Radio 3
                            </n-radio>
                        </n-space>
                    </n-radio-group>
                    <!-- <n-input v-model:value="formValue.phone" placeholder="电话号码" /> -->
                </n-form-item>
                <n-form-item label="chekbox" path="phone">
                    <n-checkbox-group v-model:value="formValue.check">
                        <n-space>
                            <n-checkbox value="Option 1">
                                Option 1
                            </n-checkbox>
                            <n-checkbox value="Option 2">
                                Option 2
                            </n-checkbox>
                            <n-checkbox value="Option 3">
                                Option 3
                            </n-checkbox>
                        </n-space>
                    </n-checkbox-group>
                    <!-- <n-input v-model:value="formValue.phone" placeholder="电话号码" /> -->
                </n-form-item>
                <n-form-item label="电话号码" path="phone">
                    <n-switch v-model:value="formValue.phone" />
                    <!-- <n-input v-model:value="formValue.phone" placeholder="电话号码" /> -->
                </n-form-item>
                <n-form-item label="电话号码" path="phone">
                    <n-input v-model:value="formValue.phone" placeholder="电话号码" />
                </n-form-item>
                <n-form-item>
                    <n-button attr-type="button" @click="handleValidateClick">
                        验证
                    </n-button>
                    <n-button attr-type="button" @click="test">
                        test
                    </n-button>
                </n-form-item>
            </n-form>
        </div>


        <input ref="input" type="file" @change="handleFiles" />

        <!-- <form id="form"><input type="file" name="file" id="file" /><br /></form> -->


    </baseCard>
</template>

<style src="./index.scss" scoped></style>
<style lang="scss" scoped>
.narrow {
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    padding: 0px 2px;
    border-radius: 3px;
    cursor: pointer;
}

.narrow:hover {
    background-color: #e8e8e8;

}
</style>